<template>
  <div class='m-courseList'>
    <!-- search -->
    <el-form class='m-courseList_form' :inline='true' label-width="80px">
      <el-form-item label='手机号码'>
        <el-input class='form-content' v-model.trim='search.phone' type='number' />
      </el-form-item>
      <!--
      <el-form-item label='销售人员'>
        <el-select class='form-content' v-model='search.sell'>
          <el-option
            v-for="(opt) in sellerList"
            :key="opt.staff_id"
            :value="opt.staff_id"
            :label="opt.name">
          </el-option>
        </el-select>
      </el-form-item>
      -->
      <el-form-item label='排序方式'>
        <a-select class='form-content' v-model='search.order' :options='orderList' />
      </el-form-item>
      <el-form-item label='客户名称'>
        <el-input class='form-content' v-model.trim='search.name' />
      </el-form-item>
      <!--
      <el-form-item label='跟进时间' class='flexBox'>
        <el-input class='form-content' v-model.trim='search.number' type='type' style='width: 100px;' placeholder='' />
        <a-select class='form-content'
          v-model='search.followUp'
          :options='followUpList'
        />
      </el-form-item>
      <el-form-item label='意向类别'>
        <a-select class='form-content' v-model='search.dues' :options='duesList' />
      </el-form-item>
      -->
      <el-form-item label='客户类型'>
        <a-select class='form-content' v-model='search.type' :options='typeList' />
      </el-form-item>
      <attr-search
        ref='attrSearch' aType='3'
      />
      <div class='btnWrap'>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button @click='searchFun'>搜索</el-button>
        <el-button type='primary' @click='toDetail'>添加客户</el-button>
      </div>
    </el-form>
    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='150' slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmDepartment-table-handle'>
            <el-button size='mini' @click='toUpdate(scope.row.id)'>修改</el-button>
            <el-button size='mini' @click='deleteCourse(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <!-- 归属 -->
    <select-list  ref='selectList' :id='selectId' @update='searchFun' />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import selectList from '@/module/customer/u-selectList'
import AttrSearch from '@/components/business/AttrSearch'
import CUSTOMER_TYPE from '@/api/customer'

export default {
  name: 'course',

  components: {
    selectList,
    AttrSearch
  },

  data() {
    const custType = (value) => {
      const obj = Object.keys(CUSTOMER_TYPE).filter(v => v === value)
      return obj.length > 0 ? CUSTOMER_TYPE[obj] : value
    }
    return {
      tableKeys: [
        { prop: 'phone', label: '手机号码', width: '140' },
        { prop: 'short_name', label: '客户名称', minWidth: '100' },
        { prop: 'type', label: '客户类别', minWidth: '100', filter: custType }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      // search
      search: {
        phone: '',
        name: '',
        sell: '',
        order: '',
        dues: '',
        number: '',
        followUp: '',
        type: '2'
      },
      sellerList: [
        { label: '已下架', value: 0 },
        { label: '进行中', value: 1 },
        { label: '已结束', value: 3 }
      ],
      orderList: [
        { label: '按创建时间正序', value: '3' },
        { label: '按创建时间倒序', value: '4' }
      ],
      duesList: [],
      followUpList: [
        { label: '全部', value: 0 },
        { label: '天内未跟进', value: 1 },
        { label: '天内已跟进', value: 2 },
        { label: '从未跟进', value: 3 }
      ],
      typeList: Object.keys(CUSTOMER_TYPE).map(v => ({
        label: CUSTOMER_TYPE[v],
        value: v
      }))
    }
  },

  mounted() {
    this.getStaffs()
    this.getDues()
    this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const { name, phone, order, sell, dues, number, followUp, type } = this.search
      const params = { aFirmId: this.aFirmId, aPageNum, aPageSize }

      if (name || name === 0) params.aName = name
      if (phone) params.aPhone = phone
      if (order) params.aOrderBy = order
      if (sell) params.aSaleId = sell
      if (dues) params.aDueId = dues
      if (number || number === 0) params.aLogDays = number
      if (followUp) params.aDaysType = followUp
      if (type) params.aType = type
      params.aAttrs = this.$refs.attrSearch.getData()
      return this.$api.crmGetIntents(params)
    },

    getData(data) {
      this.data = data
    },

    clearSearch() {
      Object.keys(this.search).forEach(v => {
        this.search[v] = ''
      })
      this.$refs.attrSearch.clear()
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    async getDues() {
      const { code, data } = await this.$api.crmGetDues({
        aFirmId: this.aFirmId
      })
      if (code === 0) {
        this.duesList = data.list.map(v => ({
          value: v.id,
          label: v.name
        }))
        this.duesList.unshift({
          value: '',
          label: '全部'
        })
      }
    },

    async getStaffs() {
      const { code, data } = await this.$api.firmGetStaffs({
        aFirmId: this.aFirmId
      })
      if (code === 0) {
        this.sellerList = data.list
      }
    },

    toDetail() {
      this.routerPush('customerAdd')
      this.$router.push({ name: 'customerAdd' })
    },

    async deleteCourse(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该客户信息吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.crmDelete({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    toUpdate(id) {
      this.routerPush('customerDetail', { query: { id, type: 'set' } })
      this.$router.push({ name: 'customerDetail', query: { id, type: 'set' } })
    },

    toHistory({ id, phone, short_name }) {
      const query = { id, short_name, phone }
      this.routerPush('applyHistory', { query })
      this.$router.push({ name: 'applyHistory', query })
    },

    toFollowUp({ id, short_name, phone }) {
      const params = {
        query: {
          id,
          phone,
          name: short_name
        }
      }
      this.routerPush('customerFollowUp', params)
      this.$router.push({ name: 'customerFollowUp', query: params.query })
    },

    openAttribution(id) {
      this.selectId = id
      this.dialogVisible = true
      this.$refs.selectList.show()
    },

    ddd() {},

    handleClose() {
      this.dialogVisible = false
    }
  },

  filters: {
    getStatusDesc(v) {
      let str = ''
      switch (parseInt(v, 10)) {
      case 1:
        str = '进行中'
        break
      case 3:
        str = '已完成'
        break
      default:
        str = '已下架'
        break
      }
      return str
    }
  }
}
</script>

<style lang='less'>
.m-courseList {
  &_form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 33.333%;
      margin-right: 0;
      display: flex;
      align-items: center;
      & > .el-form-item__content {
        flex: 1;
      }
    }
    .form-content {
      width: 100%;
    }
    .u-attr-search {
      .item {
        width: 33.333%;
        .name {}
      }
      .form-content {
        .el-input, .el-select {
          width: 100%;
        }
      }
    }
    .flexBox {
      .el-form-item__content {
        display: flex;
        .el-input {
          margin-right: 10px;
        }
      }
    }
    .btnWrap {
      display: flex;
      // justify-content: flex-end;
      padding-bottom: 20px;
    }
  }
}
</style>